<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>moell/webim 基于swoole扩展开发的在线聊天室</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <style>
       
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="webim">
<div class="row">
    <div class="col-xs-10 col-xs-offset-1" style="margin-top:40px;">
        <div class="panel panel-info">
            <div class="panel-heading">
                moell/webim: PHP + Swoole 简易聊天室
            </div>
            <div class="panel-body no-padding">
                <div class="col-xs-3 user-list">

                </div>
                <div class="col-xs-9 no-padding">
                    <div class="chat-list">
                    </div>
                    <div class="message">
                        <div class="text">
                            <textarea id="content"></textarea>
                        </div>
                        <div class="send" onClick="sendMsg()">
                            发送
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendor/layer/layer.js"></script>
<!-- <script src="js/webim.js"></script> -->
</body>
<script>

 //websock
function link () {
      ws = new WebSocket("ws://localhost:9501");//连接服务器
      console.log(ws);
      ws.onopen = function(event){
         var html ='<div class="col-xs-12 notice text-center">'+username+' 加入聊天室</div>';
         $('.chat-list').append(html);
      };
      ws.onmessage = function (event) {
          var msg = JSON.parse(event.data);
          if (msg.username == username) {
            var html = '<div class="col-xs-10 col-xs-offset-2 msg-item ">'
                          +'<div class="col-xs-1 no-padding pull-right">'
                          +'<div class="avatar">'
                          +'<img src="'+msg.avatar+'" width="50" height="50" class="img-circle">'
                          +'</div>'
                          +'</div>'

                          +'<div class="col-xs-11">'
                          +'<div class="col-xs-12">'
                          +'<div class="username pull-right">'+msg.username+'</div>'
                          +'<div>'
                          +'<div class="col-xs-12 no-padding">'
                          +'<div class="msg pull-right">'+msg.data+'</div>'
                          +'</div>'
                          +'</div>';
          }else{
            var html = '<div class="col-xs-10 msg-item ">'
                      +'<div class="col-xs-1 no-padding">'
                      +'<div class="avatar">'
                      +'<img src="'+msg.avatar+'" width="50" height="50" class="img-circle">'
                      +'</div>'
                      +'</div>'

                      +'<div class="col-xs-11 no-padding">'
                      +'<div class="col-xs-12">'
                      +'<div class="username">'+msg.username+'</div>'
                      +'</div>'
                      +'<div class="col-xs-12 no-padding">'
                      +'<div class="msg">'+msg.data+'</div>'
                      +'</div>'
                      +'</div>'
                      +'</div>';
          }
            $('.chat-list').append(html);
            $(".chat-list").scrollTop($(".chat-list")[0].scrollHeight)
      }
      ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};

      ws.onerror = function(event){var html ='<div class="col-xs-12 notice text-center">WebSocket异常</div>';
      $('.chat-list').append(html);};
      
}

var ws;

$(function(){
  username = prompt("请输入您的名字", "")
  checkUsername(username);
  num  = Math.ceil(10*Math.random());
  avatar = './images/avatar/avatar'+num+'.jpeg'
  link();
})

function checkUsername(username)
{
    if (username == '' || username == undefined) {
        username = prompt("请输入您的名字", "")
        checkUsername(username);

    }
}

//发送方法
function sendMsg(){
    var msg = {};
    msg.data = $('#content').val();
    msg.username = username;
    msg.avatar = avatar;
    data = JSON.stringify(msg)
    ws.send(data);
    $('#content').val('');
    // }
}
</script>
</html>


